<template>
  <div class="leftLayout-box">
    <div class="leftLayout-ul" :class="{'leftLayout-reformat': isShow}">
      <div class="leftLayout-ul_head">
        <el-image v-show="!isShow" class="leftLayout-ul_icon" fit="contain" src="https://api.alaboshu.com/wwwroot/uploads/api/891-951-503/2023-07-18/64b62a93724114df6584e6b3.png"></el-image>
        <el-image v-show="isShow" class="leftLayout-ul_icon" style="width: 30px;" fit="contain" src="https://api.alaboshu.com/wwwroot/uploads/api/891-951-503/2023-08-02/64ca1936961f18be68d3a26b.png"></el-image>
      </div>
      <div class="leftLayout-ul_kmune">
        <div class="leftLayout-ul_xbox" :class="{'leftLayout-ul_isactive': currentIndex == index}" v-for="(item,index) in viewModel" :key="index">
          <div class="leftLayout-ul_mark leftLayout-ul_mark1"></div>
          <div class="leftLayout-ul_kli" :class="{'leftLayout-ul_active': index == currentIndex}">
            <el-icon class="leftLayout-ul_kt1">nent :is="item.icon"/></el-icon>
            <div class="leftLayout-ul_kt2">{{ item.name }}</div>
          </div>
          <div class="leftLayout-ul_mark leftLayout-ul_mark2"></div>
        </div>        
      </div>
      <div class="leftLayout-ul_footer">
        <div v-for="(cItem,cIndex) in footerList" :key="cIndex">
          <div class="leftLayout-ul_fli" @click="tabChange(cItem)" v-if="!cItem.popover">
            <el-icon class="leftLayout-ul_ft1"><component :is="cItem.icon"/></el-icon>
            <div class="leftLayout-ul_ft2">{{ cItem.name }}</div>
          </div>
          <el-popover placement="right" trigger="hover" :width="cItem.width" :show-arrow="false" v-else popper-style="border-radius: 6px;padding: 0;">
            <template #reference>
              <div class="leftLayout-ul_fli">
                <el-icon class="leftLayout-ul_ft1"><component :is="cItem.icon"/></el-icon>
                <div class="leftLayout-ul_ft2">{{ cItem.name }}</div>
              </div>
            </template>
            <div v-if="cItem.type==1" class="leftLayout-popover_serach">
              <div class="popover_serach-phed">
                <div class="popover_serach-pkt1">搜索</div>
                <el-icon class="popover_serach-pkt2"><Close /></el-icon>
              </div>
              <el-input style="margin-top: 10px;" v-model="valueModel" placeholder="请输入搜索内容" prefix-icon="Search" size="small"/>
              <div class="popover_serach-nodata">暂无搜索结果</div>
            </div>
            <div v-if="cItem.type==2" class="leftLayout-popover_mobile">
              <div class="popover_mobile-ul" v-for="(yItem,yIndex) in 3" :key="yIndex">
                <div class="popover_mobile-li" v-for="(mItem,mIndex) in 4" :key="mIndex">
                  <el-icon class="popover_mobile-mht1"><InfoFilled /></el-icon>
                  <div class="popover_mobile-mht2">轻代码</div>
                  <el-icon class="popover_mobile-mht3" v-if="mIndex<2"><TopRight /></el-icon>
                  <div class="popover_mobile-mht4" v-else>即将上线</div>
                </div>
              </div>
            </div>
            <div v-if="cItem.type==3" class="leftLayout-popover_infor">
              <div class="popover_infor-vrp1">
                <el-image class="popover_infor-vgt1" src="https://qylm.5ug.com/wwwroot/static/images/avator/man_64.png"></el-image>
                <div class="popover_infor-vgt2">已离职成员</div>
              </div>
              <div class="popover_infor-vli" v-for="(vItem,vIndex) in inforList" :key="vIndex">
                <div class="popover_infor-vlable">{{ vItem.name }}</div>
                <div class="popover_infor-intro">{{ vItem.intro }}</div>
              </div>
              <div class="popover_infor-vbuts">
                <div class="popover_infor-vbli">
                  <el-icon class="popover_infor-vicon"><User /></el-icon>
                  个人中心
                </div>
                <div class="popover_infor-vbli">
                  <el-icon class="popover_infor-vicon"><SwitchButton /></el-icon>
                  退出登录
                </div>
              </div>
            </div>
          </el-popover>  
        </div>       
        <div class="leftLayout-ul_fli leftLayout-ul_line" @click="packChange">
          <el-icon class="leftLayout-ul_ft1"><el-icon class="leftLayout-ul_ft1"><component :is="isShow ? 'DArrowRight' : 'DArrowLeft'"/></el-icon></el-icon>
          <div class="leftLayout-ul_ft2">收起</div>
        </div>
      </div>
    </div>
    <div class="leftLayout-mune">
      <div class="leftLayout-mune_h1">
        <div class="leftLayout-mune_ht1">库存管理清单</div>        
        <el-icon class="leftLayout-mune_ml"><Tickets /></el-icon>
      </div>
      <div class="leftLayout-mune_tree">
        <div class="leftLayout-mune_trli" @click="trreTab(gItem)" v-for="(gItem,gIndex) in meunList" :key="gIndex">
          <div class="leftLayout-mune_p1">
            <div class="leftLayout-mune_lable">{{ gItem.name }}</div>
            <el-icon class="leftLayout-mune_act" :class="{'leftLayout-mune_mactive': gItem.isTrue}"><ArrowRight /></el-icon>
          </div>
          <div class="leftLayout-mune_rtob" :class="{'leftLayout-mune_hul': gItem.isTrue}">
            <div class="leftLayout-mune_child" v-for="(mItem,mIndex) in gItem.childs" :key="mIndex">{{ mItem.name }}</div>
          </div>          
        </div>
      </div>
    </div>
    <!-- <drawerPopup ref="drawer_popup"></drawerPopup> -->
  </div>
</template>

<script>
// import drawerPopup from './drawerPopup'
export default {
  components: {
    // drawerPopup
  },
  data() {
    return {
      viewModel: [
        {name: '代办',icon: 'Aim'},
        {name: '会员',icon: 'House'},
        {name: '财务',icon: 'FullScreen'},
        {name: '商城',icon: 'Link'},
        {name: '门店',icon: 'Service'},
        {name: '直播',icon: 'Pointer'}
      ],
      footerList: [
        {name: '创建',icon: 'DocumentAdd',popover: false},
        {name: '搜索',icon: 'Search',popover: true,type: 1,width: 260},
        {name: '移动端',icon: 'Iphone',popover: true,type: 2,width: 200},
        {name: '我的',icon: 'User',popover: true,type: 3,width: 260},
        {name: '设置',icon: 'Setting',popover: false,type: 4}
      ],
      meunList: [
        {
          name: '商品管理',
          isTrue: false,
          childs: [
            {
              name: '商品管理',
              isTrue: false
            },
            {
              name: '商品管理',
              isTrue: false
            },
            {
              name: '商品管理',
              isTrue: false
            },
            {
              name: '商品管理',
              isTrue: false
            }
          ]
        },
        {
          name: '商品管理',
          isTrue: false,
          childs: [
            {
              name: '商品管理',
              isTrue: false
            },
            {
              name: '商品管理',
              isTrue: false
            },
            {
              name: '商品管理',
              isTrue: false
            },
            {
              name: '商品管理',
              isTrue: false
            }
          ]
        }
      ],
      inforList: [
        {
          name: '工作区',
          intro: 'swf'
        },
        {
          name: '手机',
          intro: '15678527798'
        },
        {
          name: '邮箱',
          intro: '1240157658@qq.com'
        },
        {
          name: '推荐轻流',
          intro: '清流值+1'
        }
      ],
      currentIndex: 2,
      isShow: false,
      isVisible: false,
      valueModel: ''
    }
  },
  methods: {
    packChange() {
      this.isShow = !this.isShow
    },
    trreTab(data) {
      data.isTrue = !data.isTrue
    },
    tabChange(vData) {
      if (vData.type === 4) {
        this.$refs.drawer_popup.open()
      }
    }
  }
}
</script>

<style lang="scss">
// @import './leftLayout';
</style>